<script>
import { mapState, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState("city", ["curPy"]),
    ...mapGetters("city", ["group", "pys", "hotCitys"]),
  },

  methods: {
    jump(py) {
      // 0. 给 curPy 赋值
      this.$store.commit("city/setCurPy", py);
      setTimeout(() => {
        this.$store.commit("city/setCurPy", "");
      }, 300);
      // 1. 根据 py 找到 left 下对应的 section
      const section = document.querySelector(`#${py}`);
      // 2. 获取 section 距离顶部的距离
      const offsetTop = section.offsetTop;
      // 3. 修改 box 元素的 scrollTop
      this.$refs.box.scrollTop = offsetTop;
    },
  },

  created() {
    // 派发 city 下的 refresh 动作
    this.$store.dispatch("city/refresh");
  },
};
</script>

<template>
  <div class="page-city">
    <div class="page-city__header"></div>
    <div class="page-city__search"></div>
    <div class="page-city__container">
      <div class="left" ref="box">
        <div class="hot-box">
          <button v-for="city in hotCitys" :key="city.cityId">
            {{ city.name }}
          </button>
        </div>

        <section
          v-for="item in group"
          :key="item.groupName"
          :id="item.groupName"
        >
          <div class="section-title">{{ item.groupName }}</div>
          <ul>
            <li v-for="city in item.groupList" :key="city.cityId">
              {{ city.name }}
            </li>
          </ul>
        </section>
      </div>
      <div class="right">
        <ul>
          <li v-for="py in pys" :key="py" @click="jump(py)">{{ py }}</li>
        </ul>
      </div>
    </div>
  </div>

  <div v-show="curPy" class="toast">{{ curPy }}</div>
</template>

<style scoped>
.page-city {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.page-city__header {
  flex-shrink: 0;
  height: 44px;
  background-color: #fff;
}

.page-city__search {
  flex-shrink: 0;
  height: 50px;
  background-color: #f4f4f4;
}

.page-city__container {
  position: relative;
  display: flex;
  flex: 1;
  overflow: hidden;
  background-color: #fff;
}

.left {
  flex: 1;
  overflow-y: auto;
}
.right {
  display: flex;
  align-items: center;
  width: 18px;
}

.right ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.right li {
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}

section .section-title {
  background-color: #f4f4f4;
  color: #797d82;
  padding: 0 0 0 15px;
  height: 30px;
  line-height: 30px;
}

section ul {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  list-style: none;
}

section li {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  color: #191a1b;
}

section li::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: pink;
  transform: scaleY(0.5);
}

section li:last-child::after {
  display: none;
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  border-radius: 10px;
  background-color: pink;
}

.hot-box {
  display: flex;
  height: 100px;
  padding: 10px 20px;
}

.hot-box button {
  flex: 1;
}
</style>
